<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>查询座位</title>
</head>
<body class="container" style="max-width: 800px;">
   <div class="form-horizontal" role="form">
  <div class="form-group">
    <label  class="col-sm-2 control-label">格式</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="precode" placeholder="请输入格式" value="202472610101">
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-2 control-label">起始地址</label>
    <div class="col-sm-10">
      <input type="number" class="form-control" id="startcode" placeholder="请输入起始地址" value="100">
    </div>
  </div>
       <div class="form-group">
    <label  class="col-sm-2 control-label">结束地址</label>
    <div class="col-sm-10">
      <input type="number" class="form-control" id="endcode" placeholder="请输入结束地址" value="250">
    </div>
  </div>
  <div class="form-group">
    <label  class="col-sm-2 control-label">变动位数</label>
    <div class="col-sm-10">
      <input type="number" class="form-control" id="count" placeholder="请输入变动位数" value="3">
    </div>
  </div>
       <div class="alert alert-info">变动位数决定了格式后几位被忽略（eg:2024 变动位数为2后面的24会随地址变动）</div>
       <div class="row">
  <div class="form-group text-center">
    <div class="col-12 col-sm-6 mx-auto">
      <button id="sendPostRequest" class="btn btn-primary">查询</button>
        <button id="erase" class="btn btn-danger" onclick="$('table.table tbody tr').remove()">清空查询</button>
    </div>
  </div>
           </div>
       <div class="progress">
<div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuemin="0" aria-valuemax="100">90%</div>
</div>
</div>

    <div id="responseData">
        <table class="table table-bordered">
  <caption>查询座位信息</caption>
  <thead>
    <tr>
      <th>学号</th>
      <th>自习室名字</th>
      <th>自习室座位号</th>
        <th>选座时间</th>
    </tr>
  </thead>
  <tbody>


  </tbody>
</table>
    </div>


    <script>
     $(document).ready(function() {
            var currentIndex = 0;
            progressbar=$('.progress-bar');
            progressbar.css('width','0%');
            progressbar.text('0%');
            $('#sendPostRequest').click(function() {
                var $this = $(this); // 获取按钮的jQuery对象
                $this.prop('disabled', true); // 禁用按钮

                let precode = $('#precode').val();


                var start = $('#startcode').val();
                var end = $('#endcode').val();
                var count = $('#count').val();
                var subprecode = precode.slice(0, -count);
                console.log(subprecode);

                currentIndex = parseInt(start, 10); // 确保start是一个整数

                function sendRequest() {
                    let data = {
                        precode: subprecode,
                        begin: currentIndex,
                        to: currentIndex + 10,
                        count: count
                    };

                    $.ajax({
                        url: '/getseat',
                        type: 'POST',
                        contentType: 'application/json;charset=UTF-8',
                        data: JSON.stringify(data),
                        success: function (response) {
                            if(response.length) {
                                //console.log(response)
                                for (let i=0;i<response.length;i++) {
                                    var newRow = $('<tr>');
                                    newRow.append($('<td>').text(response[i][0]));
                                    newRow.append($('<td>').text(response[i][1]));
                                    newRow.append($('<td>').text(response[i][2]));
                                    newRow.append($('<td>').text(response[i][3]));
                                    $('table.table tbody').append(newRow);
                                }

                                }
                                currentIndex += 10;
                                percentageValue = (currentIndex - start) / (end - start);
                                percentageString = (percentageValue * 100).toFixed(0) + '%'; // 保留两位小数

                                progressbar.css('width', percentageString)
                                progressbar.text(percentageString)

                                if (currentIndex > end) {
                                    currentIndex = 0;
				                    progressbar.css('width',"100%");
				                    progressbar.text("100%");
                                    $this.prop('disabled', false); // 重新启用按钮
                                    if($('table.table tbody').children().length==0){
                                        alert("你查找的都是懒蛋没有爱学习的!!!");
                                    }
                                    return;
                                }

                            // 递归调用以发送下一个请求
                            sendRequest();
                        },
                        error: function (xhr, status, error) {
                            console.error('Request failed. Returned status of ' + status + ': ' + error);
                            alert('失败');
                            $this.prop('disabled', false); // 重新启用按钮，以防出错
                        }
                    });
                }
                sendRequest();
            });
     });

    </script>
</body>
</html>
